<template>
  <header id="top" class="">
      <ul class="header-box">
        <li class="width-2-10 header-left" @click="_goBack"><span class="colorFFF">left</span></li>
        <li class="width-6-10 textAlignC colorFFF">导航栏</li>
        <li class="width-2-10 header-right"><span class="colorFFF"><img src="../assets/icon/lamp.png" alt=""></span></li>
      </ul>
  </header>
</template>

<script>
  export default {
    name: 'top',
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      _goBack(){
        history.go(-1);
      }
    }
  }
</script>

<style lang="scss" scoped>

 .header-box{
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   width: 100%;
   height: .44rem;
   line-height: .44rem;
   font-size: .16rem;
   color: #FFF;
   background-color: #0a8ddf;

   display: -webkit-flex;
   -webkit-flex-flow: row;
   -webkit-align-items: center;
   -webkit-justify-content: space-between;
   display: -ms-flex;
   -ms-flex-flow: row wrap;
   -ms-align-items: center;
   -ms-justify-content: space-between;
   display: flex;
   flex-flow: row;
   align-items: center;
   justify-content: space-between;
 }

 /*--2等份--*/
 .width-2-10 {
   -webkit-flex: 2;
   -moz-flex: 2;
   flex: 2;
 }

 /*--6等份--*/
 .width-6-10 {
   -webkit-flex: 6;
   -moz-flex: 6;
   flex: 6;
 }

 .header-left span{
   position: relative;
   float: left;
   left: .12rem;
 }

 .header-right span{
   position: relative;
   float: right;
   right: .12rem;
 }

 .header-left span img,.header-right span img{
   position: relative;
   top: .045rem;
   width: .24rem;
   height: .24rem;
 }

</style>
